<template>
	<view class="bg">
		<xl-navbar title="Loading 标签" fixed shadow></xl-navbar>
		<view class="content">
			<view class="title">基础样式type：halfCircle</view>
			<xl-loading></xl-loading>
			
			<view class="title">设置颜色、大小</view>
			<xl-loading color="#3dc4fd" :size="26"></xl-loading>
			
			<view class="title">type：rotateCircle</view>
			<xl-loading type="rotateCircle"></xl-loading>
			
			<view class="title">type：hollowDots</view>
			<xl-loading type="hollowDots"></xl-loading>
			
			<view class="title">type：chrysanthemum</view>
			<xl-loading type="chrysanthemum"></xl-loading>
			
			<view class="title">type：swappingSquares</view>
			<xl-loading type="swappingSquares"></xl-loading>
			
			<view class="title">自定义加载图片，type：custom，可放gif图片</view>
			<xl-loading type="custom" loadingImage="/static/imgs/logo.png"></xl-loading>
			
			<view class="title">自定义加载图片，普通图片可设置旋转</view>
			<xl-loading type="custom" loadingImage="/static/imgs/logo.png" imageRotate></xl-loading>
			
			<view class="title">弹窗加载，双向绑定，设置maskClick点击关闭</view>
			<xl-loading v-model="show" popup maskClick type="swappingSquares" color="#3dc4fd" :size="50"></xl-loading>
			<xl-button text="显示弹窗加载" color="#0a93ff" :margin="[10,15]" @click="showLoading"></xl-button>
		</view>
	</view>
</template>

<script setup>
	import { ref, onMounted, computed } from "vue";
	
	const show = ref(false)
	function showLoading(){
		show.value = !show.value
	}
	
</script>
